<template>
    <div>
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-form">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="父菜单" prop="userName">
                        <el-cascader :options="options" v-model="form.checed" placeholder="默认选择一级菜单"
                            :props="{ checkStrictly: true, value: 'id', label: 'menuName' }" clearable></el-cascader>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="菜单类型" prop="menuType">
                        <el-radio-group v-model="form.menuType">
                            <el-radio v-for="item in menuType" :key="item.id" :label="item.id">{{ item.name }}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="menuName">
                        <el-input v-model="form.menuName" @change="SaverouteName()"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="路由名称" prop="routeName">
                        <el-input v-model="form.routeName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="组件路由" prop="componentPath">
                        <el-input v-model="form.componentPath"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="菜单接口" prop="menuInterface">
                        <el-input v-model="form.menuInterface"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="重定向" prop="redirection">
                        <el-input v-model="form.redirection"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script>
import { Add } from '@/api/menu'
import pinyin from 'js-pinyin'
import { List } from '@/api/menu'
export default {
    data() {
        return {
            form: {
                menuName: '',
                menuType: '',
                menuUrl: '',
                parentId: '',
                menuIcon: '',
                menuInterface: '',
                routeName: '',
                componentPath: '',
                redirection: '',
                checed: [],
                parentIdAll: '',
            },
            rules: {
                menuName: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' }
                ],
                menuType: [
                    { required: true, message: '请输入菜单类型', trigger: 'blur' }
                ],
                menuUrl: [
                    { required: true, message: '请输入菜单路由', trigger: 'blur' }
                ],
                menuInterface: [
                    { required: true, message: '请输入菜单接口', trigger: 'blur' }
                ],
            },
            options: [],
            icons: [
                'fas fa-address-book', 'fas fa-address-card', 'fas fa-adjust', 'fas fa-align-center'
                // 省略了大量图标
            ],
            selectedIcon: 'fas fa-address-book',
            searchTerm: ''
        }
    },
    props: {
        menuType: {
            type: Array
        }
    },
    computed: {
        filteredIcons() {
            const regex = new RegExp(this.searchTerm, 'gi')
            return this.icons.filter(icon => icon.match(regex))
        }
    },
    methods: {
        AddMenu() {
            let _this = this;
            this.$refs.form.validate((valid) => {
                if (valid) {
                    console.log(this.form);
                    _this.form.parentId = _this.form.checed[this.form.checed.length - 1];
                    console.log(this.form.parentId)
                    debugger
                    _this.form.parentIdAll = _this.form.checed.join(',');
                    debugger
                    Add(_this.form).then(res => {
                        if (res.messag == "菜单名称已存在") {
                            this.$message.error("菜单名称已存在");
                            return;
                        }
                        if (res) {
                            this.$message.success("添加成功");
                            location.reload();
                            return;
                        }
                        else {
                            this.$message.error("添加失败");
                            return;
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        getmenu() {
            List().then(res => {
                this.options = res.data;
            })
        },
        selectIcon(icon) {
            this.selectedIcon = icon
            this.$emit('select', icon) // 触发父组件的 select 事件，传递所选图标
        },
        SaverouteName() {
            this.form.routeName = pinyin.getFullChars(this.form.menuName).toLowerCase();
        },
    },
    created() {
        this.getmenu();
    }
}
</script>
<style>
.icon-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.icon-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.icon {
    font-size: 24px;
    margin: 5px;
    cursor: pointer;
}

.selected {
    background-color: #007bff;
    color: #fff;
    border-radius: 50%;
    padding: 3px;
}

.el-cascader-menu__wrap {
    height: 204px;

}

.el-cascader {
    width: 100%;
}
</style>